<template>
  <div class="full-page">
    <van-nav-bar title="粉丝" left-arrow @click-left="onClickLeft" fixed />
    <div class="con">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="box" v-for="item in list" :key="item.id">
          <img v-lazy="item.avatar" alt="" class="left" />

          <div class="right">
            <div>
              <p class="username">{{ item.username }}</p>
              <p class="time">
                {{ item.sex }}
                <span>{{ item.time }}年加入</span>
              </p>
            </div>
            <p class="btn" @click="follow(item.id)">+ 关注</p>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { NavBar, List } from "vant";

export default {
  components: {
    [NavBar.name]: NavBar,
    [List.name]: List,
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    follow(id) {},
    onLoad() {
      let a = {
        id: "1",
        sex: "女",
        time: "2021",
        avatar:
          "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
        username: "西瓜",
      };
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(a);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
  },
};
</script>

<style scoped lang="scss">
.full-page {
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  z-index: 1;
  overflow: hidden;
  .con {
    height: calc(100% - 50px);
    overflow: auto;
    padding-bottom: 21.3333vw;
    box-sizing: border-box;
    &::-webkit-scrollbar {
      display: none;
    }
    .box {
      display: flex;
      align-items: center;
      height: 21.3333vw;
      padding: 0 4vw;
      justify-content: space-between;
      .left {
        border-radius: 50%;
        margin-right: 2.6667vw;
        width: 10.6667vw;
        height: 10.6667vw;
      }
      .right {
        height: 100%;
        display: flex;
        flex: 1;
        justify-content: space-between;
        align-items: center;
        div {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .time {
            margin-top: 2.6667vw;
            color: #999999;
            font-size: 3.2vw;
          }
        }
        .btn {
          background: #666ee8;
          text-align: center;
          border-radius: 6.6667vw;
          padding: 1.8667vw 4vw;
          font-size: 3.7333vw;
          color: #fff;
        }
      }
    }
  }
}
</style>